
<template>
  <el-cascader ref="categCascader" v-model="value" :options="options" :props="categprops" @change="categChange"
    filterable clearable v-bind="$attrs" v-on="$listeners"></el-cascader>
</template>

<script>
export default {
  name: "sku_categ_cascader",
  props: {
    categList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value: [],
      categprops: {
        value: "id",
        label: "name",
        checkStrictly: true,
      },
      options: [

      ],
    };
  },


  mounted() {
    let loginUser = this.$loginUser
    const categKey = `/aliyun_oss/download/category/${loginUser.currentAgentId}.json`
    const list = this.$store.state.commonMapCache[categKey]
    if (list) {
      this.options = list
      this.$emit("all_categ",list)
    } else {
      this.$ajax({
        url: categKey,
        method: "post",
        isSuccess: (res) => {
          return !!res
        },
        success: (res) => {
          let list = []
          if (res instanceof Array) {
            list = res
          } else {
            list = (res && res.data && res.data.rows) || []
          }
          list.forEach(it => {
            this.fixString(it)
          })
          this.options = list
          this.$emit("all_categ",list)
          this.$store.commit("pushCommonData", {
            key: categKey,
            data: list
          })
        },
      });
    }

  },
  computed: {
    propsValue() {
      return this.categList.map(it => String(it.categoryId));
    },
    propsLabel() {
      return this.categList.map(it => String(it.name)).join(' / ')
    },
  },
  watch: {
    propsLabel: function (val) {
      this.$nextTick(() => {
        if (this.$refs.cascader) {
          this.$refs.cascader.inputValue = val
        }
      })
    },
    categList:{
			handler(newVal , oldVal){  //对象式监听，立即监听，深度监听
				this.value = newVal.map(it => String(it.categoryId));
			},
			immediate:true,  //立即监听
			deep:true,  //深度监听
		}
  },
  methods: {
    treeToArrayStack(root) {
      const stack = JSON.parse(JSON.stringify(root))
      const result = []

      while (stack.length > 0) {
        const node = stack.pop()
        result.push({ ...node })

        if (node.children) {
          stack.push(...node.children.reverse())
          delete result[result.length - 1].children
        }
      }

      return result
    },
    fixString(item) {
      item.id = String(item.id)
      if (item.children) {
        item.children.forEach(it => {
          this.fixString(it)
        })
      }
    },

    categChange(e) {
      this.$emit("input", e);
      this.$emit("change", e);
      this.$emit("update:categId", e[e.length - 1]);

      const categList = []
      if(e.length>0){
        this.treeToArrayStack(this.options).forEach(item => {
          if (e.includes(item.id)) {
            categList.push({
              categoryId: item.id,
              categoryName: item.name
            })
          }
        })
      }
      this.$emit("update:categList", categList);
      this.$emit("changeCategList", categList);
    },
  },
};
</script>
